iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
1
Modern Web

高效 Coding 術:Angular Schematics 實戰三十天系列 第 31 篇

[高效 Coding 術:Angular Schematics 實戰三十天] Day30 - 總結

  • 分享至 

  • xImage
  •  

三十天系列文至此即將告一個段落,雖然筆者到目前為止並沒有分享非常多的實戰,但 ng generate 、 ng add 、 ng update 這三個面向的 Schematic 其實也都已經介紹過且實戰練習過了,未來在實務應用上,也就只是範本種類再多一些、程式碼或是檔案再多一些、複雜度更高而已,屆時要考驗的就是大家有沒有辦法舉一反三了。

最後,筆者幫大家總結一下這個系列文的重點:

關於 collection.json

在使用 Schematic 的時候, Angular CLI 或者是 Schematics CLI 都需要先讀取 Schematics 專案裡的 collection.json 來解析該專案是否有該 Schematic 的設置並執行。

同樣地, Schematics 專案裡所有的 Schematic 都會在 collection.json 裡設置好相關設定與檔案路徑。

支援 ng update 的 Schematics 除外,通常支援 ng update 的 Schematics 會新增另外一個 migration.json 來配置。

關於 JSON Schema

JSON Schema 是一組用來描述另一組 JSON 數據結構的 JSON ,目前已經廣泛應用在非常多的地方。

而替你的 Schematic 加上 JSON Schema 除了可以用來規範及驗證使用者所輸入的參數外,還能夠讓你的 Schematic 擁有提示訊息的功能。

至 Day05 看更多

關於測試

撰寫測試程式碼可以保護你的程式、快速驗證結果,且寫測試的同時也是在寫規格,正因為如此,想要讓自已的程式碼品質變得更高,以減少未來花費在 Debug 上的時間的話,學會撰寫測試是必然且必須的。

另外,筆者覺得當我們在寫測試的時候,以下幾個心法需要銘記在心:

  • 先以調用方的角度來調用這塊代碼,並且從調用方的角度說出所期望的結果。
  • 編寫測試時僅僅關注測試,不想去如何實現。
  • 3A 原則
    • Arrange - 初始化目標物件、相依物件、方法參數、預期結果,或是預期與相依物件的互動方式等等。
    • Act - 呼叫目標物件的方法。
    • Assert - 驗證結果是否符合預期。

Imgur

  • 絕不跳過重構
  • 儘快變綠
  • 出錯後放慢腳步

筆者在今年 1月時,曾經在 Angular Taiwan 線上讀書會 分享過測試的主題,有興趣的邦友可以看看當時的錄影與簡報。

關於範本

使用範本時,範本檔名是用兩個底線區隔參數與固定文字,如:

hello-__name__.component.ts

要使用函式,則是直接在參數名稱後面加上 @ 與函式名稱,如:

hello-__name@dasherize__.component.ts

而在範本檔案內,則是用 <%= 參數名稱 %> 來將參數的值綁定到範本中;在範本裡使用判斷式時,是用 <% %> 來將判斷式的區域包起來。

如:

import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';

@Component({<% if(!skipSelector) {%>
  selector: '<%= selector %>',<%}%><% if(inlineTemplate) { %>
  template: `
    <p>
      <%= dasherize(name) %> works!
    </p>
  `,<% } else { %>
  templateUrl: './<%= dasherize(name) %>.<%= dasherize(type) %>.html',<% } if(inlineStyle) { %>
  styles: []<% } else { %>
  styleUrls: ['./<%= dasherize(name) %>.<%= dasherize(type) %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
  encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
  changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
})
export class <%= classify(name) %><%= classify(type) %> implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

其實筆者在 Day29 的文章裡有分享到另一個範本語法的類型: TemplateAstEscape ,它是被 <%- 與 %> 包起來的區段,不過筆者目前沒有在原始碼裡發現它的存在。

關於 TypeScript Compiler API

TypeScript API 在 Schematics 專案中大多是用於解析程式碼,取得程式碼欲插入的位置後的實際變更依舊交由 Tree 來處理。

而筆者在 Day20 與 Day21 所分享的 TypeScript AST Viewer 和 TSQuery Playground 都是可以讓你在使用 TypeScript Compiler API 變得更輕鬆愉快的超好用工具,請多善加利用。

關於 Angular Schematics API

Angular 團隊針對 Angular 專案本身做了很多非常好用的 API ,擅用這些 API 可以讓你寫 Schematics 時更加輕鬆、愉快。

雖然筆者還有不少是在引入路徑為 @angular-devkit/schematics 底下與 @angular-devkit/core 底下的 API 還沒有介紹完,但在鐵人賽這邊實在是不好搜尋與翻閱,所以筆者想未來等筆者比較有空時,找個比較好的方式來將它們介紹給大家,屆時可能會將其發佈在我個人的部落格上,並且分享到 Angular Taiwan 的 FB 社團裡。

有興趣的邦友們,可以再多加留意!

Q&A

只有三大框架能使用 Schematics 嗎?

雖然筆者的確只針對 Angular 、 React 與 Vue 來分享,但其實「一法通,萬法通。」,其運作方式與原理都一樣,只要該專案有使用 npm 系統,基本上是都可以使用的。

在非 Angular 專案中,一定要透過 Schematics CLI 才能使用 Schematics 嗎?

目前在非 Angular 的專案中,的確無法像在 Angular 專案裡可以直接使用 ng add 、 ng generate 與 ng update 這些指令來使用 Schematics ,一定要透過 Schematics CLI 來使用。

但雖然不能直接透過上述指令啟動 Schematics ,Schematics 本身可以做到的事情可是一樣都沒少,頂多只是需要換個方式或者是繞個彎處理而已,實際上都能夠達到該有的效果。

筆者相信以 Angular 團隊的技術能力,一定可以在不久遠的將來就能在其他專案做到這件事,敬請期待囉!

文章內的範例跟練習都太簡單了,可以難一點嗎?

雖然範例跟練習都很粗淺,但這系列寫到現在,大致上已經把 Schematics 的可以做到的事情都差不多介紹過一遍,也把目前所知道的 Schematics 相關工具都分享給大家,剩下的就只是應用層面及程式複雜度的問題而已。

此外,雖然筆者還是有不少事情沒有分享到,但俗話說:「授人以魚不如授人以漁」,筆者已經將這個這麼好用的工具分享給大家了,其他的就留給大家去探索與研究囉!

非常期待大家能夠使用它開發出更多、更好用的 Schematics 。

Angular Schematics API List 就佔了六篇文章的篇幅,會不會太多?

或許有邦友覺得筆者這六篇文章根本就是濫竽充數,但筆者在一開始就有解釋過:因官方並沒有這方面的 API 文件,所以將其提列出來也是希望未來大家在找的時候能夠更方便。

而另一部分是,筆者並不是單純的複製貼上而已,每一個 API 筆者都有仔細看過原始碼與其測試,並且自己寫範例去測試該 API 是否正如自己所想的方式運作,而筆者也因為這六篇文章也讓筆者自己對於 Angular Schematics 的了解又更上了一層樓。

所以不管別人怎麼說,至少筆者覺得這六篇文章對自己而言是非常重要且非常有價值的,希望你也能這麼覺得。

其他三個指令都可以客製 Schematics ,但 ng new 呢?

關於 ng new 的部分,雖然 Angular 本身也是使用 Schematics 來處理,但很遺憾的是,目前並沒有開放給開發者們來客製,或許在未來的某一天會有機會也說不定,敬請期待囉!

最後

Angular Taiwan 今年的大型會議 ng-tw 2019 將在 11/2 、 11/3 宜蘭礁溪老爺飯店舉行,兩天一夜與大神們近距離研討的機會非常難得,走過路過千萬別錯過!!

此外,以下是臺灣 Angular 社群的相關連結,非常歡迎大家加入 Angular 的行列:

本系列文至此結束,非常感謝大家的 Like 、收藏、訂閱以及分享,希望本系列文能夠幫到大家,讓人人都變成高效率的開發者,謝謝!


上一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day29 - Angular Schematics API List (六)
下一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day31 - 完賽心得
系列文
高效 Coding 術:Angular Schematics 實戰三十天 共 32 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言